<template>
	<view class="daohang">
		<text>2021年四月考勤统计</text>
		<text class="footer iconfont icon-xiangzuo1" @click="back"></text>
	</view>
		<view class="content">
		<view><text>加班（时）</text> <text>{{jiaban}}</text></view>
		<view><text>迟到（次）</text> <text>{{chidao}}</text></view>
		<view><text>旷工（天）</text> <text>{{kuanggong}}</text></view>
		<view><text>事假（天）</text> <text>{{shijia}}</text></view>
		<view><text>病假（天）</text> <text>{{bingjia}}</text></view>
		<view><text>女生假（天）</text> <text>{{nvshengjia}}</text></view>
		<view class="nianjia"><view><text>年假（已用天数/总天数）</text></view> <view><text>{{nianjia}}/15</text></view>
		</view></view>
</template>
<script>
	import {ref,computed,reactive,toRefs} from 'vue';
	import store from '../../store/index'
	import http from '../../utils/http.js'
	// import {mapState} from 'vuex'
	export default {
		setup(){
			let data=reactive(
			 {
			 jiaban:0,
			 chidao:0,
			 kuanggong:0,
			 shijia:0,
			 bingjia:0,
			 nvshengjia:0,
			 nianjia:0,
			 kaoqinArr:[],
			 account:''
			 }
			 
			)
			return {...toRefs(data)}
		},
		methods: {
			back(){
				uni.navigateBack({
			// delta: 1
			});
		 },
		 //判断月份日期   time==1开始时间  time==2结束时间
		 decideMonth(month,time){
			 // if(month){}
			let num=Number(month);
			console.log('Num', num)
			let numDay=0;
			if(num==1||num==3||num==5||num==7||num==8||num==10||num==12){
				if(time==1){
					numDay=31-num
				}else{
					numDay=num
				}
			}else if(num==4||num==6||num==9||num==11){
				if(time==1){
					numDay=30-num
				}else{
					numDay=num
				}
			}
			else if(num==2){
				if(time==1){
					numDay=30-num
				}else{
					numDay=num
				}
			}
			return numDay
		 },
		 //计算请假时间
		 countTime(starttime,endtime){
			 let start=starttime.split('-');
			 let end=endtime.split('-');
			 let day=0;
			 // console.log('11111',this.decideMonth(start[1],2));
			 if(Number(start[1])!=Number(end[1])){
				 // console.log(111)
				 day=this.decideMonth(start[1],1)+this.decideMonth(end[1],2);
			 }else{
				 day=Number(end[2])-Number(start[2])
				 // console.log('同月天数',day)
			 }
			 // console.log(start)
			 return day;
		 },
		},
		// computed:mapState('wuxiaoyuan',['a','b']),
		onShow() {
			this.account=store.state.liujinchang.user.work_id
			console.log(store.state.wuxiaoyuan.kaoqinArr[0])
			this.kaoqinArr=store.state.wuxiaoyuan.kaoqinArr[0]
			this.jiaban=this.kaoqinArr.jiaban;
			this.chidao=this.kaoqinArr.chidao;
			this.kuanggong=this.kaoqinArr.kuanggong;
			http({
				url:'/home/get_shenqingjilu',
				data:{
					account:this.account
				}
			}).then(res=>{
				console.log(res)
				let resData=res.data.data
				let onday=store.state.wuxiaoyuan.onDay
				let day=0
				// for(let i=0;i<resData.length;i++){
					resData.forEach(v=>{
						// console.log(String(v.starttime).slice(0,7))
						if(String(v.starttime).slice(0,7)==String(onday).slice(0,7)){
							// console.log(111)
						if(v.type=='事假'){
							this.shijia+=this.countTime(v.starttime,v.endtime)
						}else if(v.type=='年假'){
							// arr.push(this.countTime(v.starttime,v.endtime))
							this.nianjia+=this.countTime(v.starttime,v.endtime)
							// console.log('请假天数',this.nianjia)
						}else if(v.type=='病假'){
							this.bingjia+=this.countTime(v.starttime,v.endtime)
						}else if(v.type=='女生假'){
							this.nvshengjia+=this.countTime(v.starttime,v.endtime)
							console.log('请假天数',this.countTime(v.starttime,v.endtime))
							// console.log('bs',String(v.endtime).slice(8,10))
						}
						}
					})
				// }
				console.log(this.shijia,this.nvshengjia)
			})
		}
		// computed:mapState('wuxiaoyuan',['a','b']),
	}
</script>
<style lang="less">
	@import url("~@/static/font/iconfont.css");
page{
	background: rgb(242,242,242);
}
.daohang{
	position: relative;
	padding: 50rpx 0 30rpx 0;
	background: #FFFFFF;
	text:last-child{
		position: absolute;
		top: 60rpx;
		left: 20rpx;
	}
	text:first-child{
	display: block;
	font-size: 38rpx;
	text-align: center;
	font-weight: 100;
	}
}
.content{
	margin-top: 20rpx;
	padding: 0 50rpx;
	background-color: #FFFFFF;
	view{
	padding: 20rpx 0;
	border-bottom: 1rpx solid rgb(242,242,242);
	text{
		color: rgb(72,72,72);
	}
	text:first-child{
		display: inline-block;
		width: 200rpx;
	}
	text:last-child{
		margin-left: 200rpx;
	}
	}
	
}
.nianjia{
	padding: 0;
	border-bottom: none;
	display: flex;
	align-items: center;
	view:first-child{
		width: 200rpx;
		text{
		margin-left: 0;
		}
	}
	view{
		border: none !important;
	}
}
</style>
